<template>
  <div class="home-container">
    <div class="banner">
      <img lazy-load :src="banner ? banner[0].img : ''">
    </div>
    <div class="home-content ">
      <div class="home-item">
        <h2>精品推荐</h2>
        <div class="cartoon-content">
          <List :detail="boutique[0].list" />
        </div>
      </div>
    </div>
    <HotRecommend v-if="hot[0]" :detail="hot[0]" />
    <div class="home-content">
      <div class="home-item">
        <h2>今日推荐</h2>
        <div class="cartoon-content">
          <List :detail="boutique[1].list" />
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-item">
        <h2>人气漫画</h2>
        <div class="cartoon-content">
          <List :detail="boutique[2].list" />
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-item">
        <h2>最新漫画</h2>
        <div class="cartoon-content">
          <List :detail="boutique[3].list" />
        </div>
      </div>
    </div>
    <HotRecommend v-if="hot[3]" :detail="hot[3]" />
    <div class="home-content">
      <div class="home-item">
        <h2>新漫上架</h2>
        <div class="cartoon-content">
          <List :detail="boutique[4].list" />
        </div>
      </div>
    </div>
    <HotRecommend v-if="hot[4]" :detail="hot[4]" />
    <HotRecommend v-if="hot[1]" :detail="hot[1]" />
    <HotRecommend v-if="hot[2]" :detail="hot[2]" />
    <div class="home-content">
      <div class="home-item">
        <h2>热门漫画</h2>
        <div class="cartoon-content">
          <List :detail="boutique[5].list" />
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-item">
        <h2>好漫推荐</h2>
        <div class="cartoon-content">
          <BottomList :list="recommend" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from '~/components/List'
import BottomList from '~/components/BottomList'
import HotRecommend from '~/components/HotRecommend'
export default {
  components: {
    List,
    HotRecommend,
    BottomList
  },
  async asyncData ({ $axios }) {
    const res = await $axios.get('http://132.232.41.218:3389/home')
    // console.log('查看数据', res.data.data.homeData)
    const data = res.data.data.homeData
    return data
  },
  data () {
    return {
      keyword: '',
      homeDate: {}
    }
  },
  mounted () {
    // 可以传入config改变样式,默认images为base64图片格式,可以传入images所在url。
    function setVertical (config) {
      const color = config && config.color ? config.color : '#000'
      const txt = config && config.txt ? config.txt : '为了更好的体验，请使用竖屏浏览'
      const images = config && config.images ? config.images : ''
      const div = document.createElement('div')
      div.innerHTML = '<style type="text/css">@-webkit-keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } @keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } #orientLayer{display: none; z-index: 999999;} @media screen and (min-aspect-ratio: 1/1){#orientLayer{display: block;} } .mod-orient-layer{display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: ' + color + '; z-index: 9997} .mod-orient-layer__content{position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center} .mod-orient-layer__icon-orient{background-image: url(' + images + '); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px} .mod-orient-layer__desc{margin-top: 20px; font-size: 15px; color: #fff}</style><div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer__content"> <i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">' + txt + '</div> </div></div>'
      document.getElementsByTagName('body')[0].appendChild(div)
    }
    window.onload = function () {
      setVertical(null)
    }
  },
  head () {
    return {
      title: '首页'
    }
  }
}
</script>

<style scoped lang="scss">
.home-container {
  .banner {
    width: 100%;
    height: 218px;
    margin-bottom: 14px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
 .banner {
      aspect-ratio: 360 / 216;
    }
.home-content {
    box-sizing: border-box;
    padding: 10px 20px;
    .home-item {
      border-radius: 4px;
      overflow: hidden;
      background-color: $content-bg;
      box-sizing: border-box;
      padding: 0px 15px;
      h2 {
        color: $font-color;
        font-size: 20px;
        box-sizing: border-box;
        padding: 10px 0px;
        margin-bottom: 6px;
      }
    }
  }
}
</style>
